<template>
  <div class="message-list">
    <div v-for="message in messages" :key="message.id" class="message-item" :class="getMessageClass(message)">
      <div class="message-avatar">
        <div v-if="!message.userAvatar" class="avatar-circle">
          {{ message.userName?.charAt(0) || 'U' }}
        </div>
        <img v-else :src="message.userAvatar" :alt="message.userName" class="avatar-img" />
      </div>
      <div class="message-content">
        <div class="message-header">
          <span class="message-author">{{ message.userName }}</span>
          <span class="message-time">{{ formatTime(message.createdTime) }}</span>
        </div>
        <div class="message-text">{{ message.content }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  messages: {
    type: Array,
    default: () => []
  },
  currentUserId: {
    type: Number,
    default: null
  }
})

function getMessageClass(message) {
  if (props.currentUserId && message.userId === props.currentUserId) {
    return 'own-message'
  }
  return 'other-message'
}

function formatTime(time) {
  if (!time) return ''
  const date = new Date(time)
  const now = new Date()
  const diff = now - date
  const minutes = Math.floor(diff / 60000)
  const hours = Math.floor(diff / 3600000)
  const days = Math.floor(diff / 86400000)

  if (minutes < 60) return `${minutes}分钟前`
  if (hours < 24) return `${hours}小时前`
  if (days < 7) return `${days}天前`

  return `${date.getMonth() + 1}/${date.getDate()} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
}
</script>

<style scoped>
.message-list {
  flex: 1;
  overflow-y: auto;
  padding: 32px 20px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.message-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.message-item.own-message {
  flex-direction: row-reverse;
}

.message-avatar {
  flex-shrink: 0;
}

.avatar-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
}

.avatar-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.message-content {
  max-width: 70%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.message-item.own-message .message-content {
  align-items: flex-end;
}

.message-header {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  color: #9ca3af;
}

.message-item.own-message .message-header {
  flex-direction: row-reverse;
}

.message-author {
  font-weight: 500;
  color: #6b7280;
}

.message-time {
  color: #9ca3af;
}

.message-text {
  background: #f3f4f6;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: #2b2f36;
  word-wrap: break-word;
}

.message-item.own-message .message-text {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #ffffff;
}
</style>


